<template>
  <div class="pages">
    <button :disabled="pages.pageNo == 1" @click="pageChange('prev', -1)">
      &lt;&lt;
    </button>
    <button v-if="startNumAndEndNum.start > 1">...</button>
    <button
      v-for="(page, index) in startNumAndEndNum.end"
      :key="index"
      @click="pageChange('', page)"
      :class="{ buttonactive: page == buttonCurrent }"
      v-if="page >= startNumAndEndNum.start"
    >
      {{ page }}
    </button>
    <button v-if="startNumAndEndNum.end < totalPage">...</button>
    <button
      :disabled="pages.pageNo == totalPage"
      @click="pageChange('next', 1)"
    >
      &gt;&gt;
    </button>
  </div>
</template>

<script>
export default {
  name: "Pages",
  data() {
    return {
      allToatl: 0, //主页数据条数
      buttonCurrent: 1,
    };
  },
  props: ["pages","nodejsTab"],
  mounted() {
    this.buttonCurrent = this.pages.pageNo;
    this.$API.reqGetContentListTotal().then((res) => {
      this.allToatl = res.data.length;
    //   console.log(res.data);
    });
    // console.log(this.pages);
  },

  computed: {
    // //计算总共多少页
    totalPage() {
      this.initPage(this.allToatl);
      return Math.ceil(this.pages.total / this.pages.pageSize);
    },
    //计算出连续的页码的起始数组与结束数字
    startNumAndEndNum() {
      //定义两个变量用于存储起始数字与结束数字
      let start = 0,
        end = 0;
      //连续页面数字5【就是至少五页】，如果出现不正常的现象【就是不够五页】
      if (this.pages.continues > this.totalPage) {
        //总页数小于连续的页码数
        start = 1;
        end = this.totalPage;
      } else {
        //正常
        start = this.pages.pageNo - Math.floor(this.pages.continues / 2);
        end = this.pages.pageNo + Math.floor(this.pages.continues / 2);
        //排除start出现-1和0的情况
        if (start < 1) {
          start = 1;
          end = this.pages.continues;
        }
        //排除end出现比总页码还大的情况
        if (end > this.totalPage) {
          start = this.totalPage - this.pages.continues + 1;
          end = this.totalPage;
        }
      }
      return { start, end };
    },
  },
  watch:{
      nodejsTab(newName, oldName){
          if(newName != oldName)
          this.buttonCurrent = 1;
      }
  },
  methods: {
    pageChange(order, pageNo) {
        if(order) {
            this.pages.pageNo+=pageNo;
            this.buttonCurrent = this.pages.pageNo;
            }
        else {
            this.pages.pageNo = pageNo;
            this.buttonCurrent = this.pages.pageNo;
        }
      this.$emit("pageChange", { order, pageNo:this.pages.pageNo,totalPage:this.totalPage });
    },
    //初始化pageTotal
    initPage(newTotal) {
      this.pages.total = newTotal;
    },
  },
};
</script>

<style scoped>
.pages {
  margin: 30px;
}
.pages button {
  height: 30px;
  width: 40px;
  line-height: 30px;
  text-align: center;
  color: rgb(119, 128, 151);
  background: white;
  display: inline-block;
  font-size: 13px;
  border: 0px;
  border-right: 1px solid rgb(221, 221, 221);
  border-top: 1px solid rgb(221, 221, 221);
  border-bottom: 1px solid rgb(221, 221, 221);
}
.pages button:nth-child(1) {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-left: 1px solid rgb(221, 221, 221);
}
.pages button:nth-last-child(1) {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.buttonactive {
  color: rgb(128, 189, 1) !important;
}
</style>